<template>
	<view class="my-page ">
		<nav-custom></nav-custom>
		<view class="container padding-bottom">
			<view class="flex justify-center">
				<view class="search color-8d" @click="gotoSearch">
					<text class="iconfont icon-sousuo f14 bold"></text>
					<text class="text">搜索商品</text>
				</view>
			</view>
			<view class="goods-nav flex align-center bgColor-fff ">
				<view class="nav-item flex-1 f16" v-for="(item,index) in navList"
					:style="{color:item === cateItem ? '#2c2c2c':''}" :key="index" @click="changeList(item)">
					{{item}}
				</view>
			</view>
      <view class="goods-list flex flex-wrap justify-between">
        <view class="goods-item" v-for="item in goodsList" :key="item.id">
          <goods-item :gdata="item"></goods-item>
        </view>
      </view>
		</view>
    <tab-bar tabbar="categorize"></tab-bar>
	</view>
</template>

<script>
	export default {
    onReachBottom() {
      this.getGoodsList()
    },
    onLoad() {
      this.getGoodsList()
    },
		data() {
			return {
        page:0,
				cateItem: '蛋糕',
				navList: ["蛋糕","面包","小食","配件"],
        goodsList:[]
			};
		},
		methods: {
			gotoSearch() {
				uni.navigateTo({
					url: '/pagesA/mySearch/mySearch'
				})
			},
      getGoodsList(bcname) {
        bcname = bcname ? bcname : this.cateItem
        let skip = this.page * 8
        let url = `/1.1/classes/classify?where={"bcname":"${bcname}"}&limit=8&skip=${skip}`
        this.cateItem = bcname
        this.$H.get(url).then(res => {
          console.log(res);
          if(res.data.results.length > 0) {
            this.goodsList = this.goodsList.concat(res.data.results)
            this.page++
          }else {
            uni.showToast({
              title:"没有了哦~",
              icon:"none"
            })
          }
        })
      },
      changeList(bcname) {
        if(this.cateItem !== bcname) {
          this.page = 0
          this.goodsList = []
          this.getGoodsList(bcname)
        } 
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.search {
			margin: 20rpx 0;
			width: 80%;
			height: 68rpx;
			line-height: 68rpx;
			background-color: #ffe32a;
			border-radius: 34rpx;
		}

		.goods-nav {
			height: 72rpx;
			box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			border-top: 1px solid #e9e9e9;

			.nav-item {
				height: 36rpx;
				line-height: 36rpx;

				&:nth-child(-n+3) {
					border-right: 1px solid #bebebe;
				}
			}
		}
    
    .goods-list{
      padding: 16rpx;
      
      .goods-item{
        margin-bottom: 20rpx;
      }
    }
  }
</style>
